<template>
  <el-dialog :visible.sync="coSelectVisible" :append-to-body="true" :title="params.title">
    <div class="coSelect-dialog">
      <div class="inputLable inputLable2 groupbtn flex flexac m-l-15">
        <el-input v-model="queryParam.name" class="input" :placeholder="params.placeholder" />
        <div class="selectBtn flex flexac m-l-60" @click="getCoSelectList">查询</div>
        <el-button class="defaultbtn saveBtn m-l-10" @click="handleSave">保存</el-button>
      </div>
      <el-table
        ref="multipleTable"
        :data="dataList"
        highlight-current-row
        @select-all="handleCheck"
        @select="handleCheck"
        @selection-change="handleCheckChange"
      >
        <el-table-column type="selection" width="55" />
        <template v-for="item in tablehead">
          {{ item }}
          <el-table-column :key="item.index" :align="params.location" :prop="item.prop" :label="item.label" />
        </template>
      </el-table>
      <el-pagination
        class="paginationWrap flex m-t-10"
        :current-page="paging.currentPage"
        :page-sizes="paging.pageSizeArr"
        :page-size="paging.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="paging.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

  </el-dialog>
</template>

<script>
import { fetchList, updateArticle } from '@/api/landbrand'
import { showNotice } from '@/utils/toolclass'

export default {
  name: 'CoSelect',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    paging: {
      type: Object,
      default: () => ({
        currentPage: 1,
        pageSize: 4,
        pageSizeArr: [1, 4, 8, 10],
        total: 40
      })
    },
    queryParam: {
      type: Object,
      default: () => ({
        id: '',
        name: ''
      })
    },
    params: {
      type: Object,
      default: () => ({
        title: '',
        placeholder: '',
        location: ''
      })
    },
    tablehead: {
      type: Array,
      default: () => ([])
    },
    data: {
      type: Object,
      default: () => ({
        id: '',
        name: '',
        reamrk: ''
      })
    }
  },
  data() {
    return {
      row: {},
      coSelectVisible: false,
      dataList: {}
    }
  },
  watch: {
    coSelectVisible(v) {
      this.$emit('input', v)
    },
    value(v) {
      this.coSelectVisible = v
    }
  },
  mounted() {
    this.getCoSelectList()
  },
  methods: {
    /**
   *    单选操作，全选按钮失效操作
   */
    handleCheck(selection, row) {
      this.$refs.multipleTable.clearSelection()
      if (selection.length === 0) { // 判断selection是否有值存在
        return
      }
      if (row) {
        this.selectioned = row
        this.row = row
        this.$refs.multipleTable.toggleRowSelection(row, true)
      }
      // this.handleSave(row)
    },

    /**
   *  取消单选的checkbox
   */
    handleCheckChange(row) {
      if (row.length === 0) {
        this.selectioned = null
      }
    },
    handleSave() {
      updateArticle(this.row).then((res) => {
        if (this.selectioned === null) {
          showNotice('error', '提示', '保存失败!')
        } else {
          if (res.code === '000000') {
            this.$emit('update', res.data)
            showNotice('success', '提示', '保存成功!')
            this.$emit('handleRefresh')
            this.$emit('handleCloseDialog')
            this.coSelectVisible = false
          }
        }
      })
    },
    handleSizeChange(val) {
      this.dataList = val
      this.paging.pageSize = val
      this.getCoSelectList()
    },
    handleCurrentChange(val) {
      this.paging.currentPage = val
      this.getCoSelectList()
    },
    getCoSelectList() {
      fetchList(this.queryParam.id, this.queryParam.name, this.paging.currentPage, this.paging.pageSize).then((res) => {
        if (res.code === '000000') {
          this.factoryListInfo = res
          this.dataList = res.data
          this.paging = {
            currentPage: res.pager.pageIndex,
            pageSize: res.pager.pageSize,
            total: res.pager.totalSize
          }
        }
      })
    }
  }

}
</script>

<style lang="scss">
.el-dialog {
  width: 480px;
  .el-table th>.cell {
    padding-left: 14px;
  }
  .el-dialog__header {
    height: 46px;
    background: #b63731;
    padding: 13px;
  }
  .el-dialog__title {
    color: #ffffff;
    font-size: 14px;
  }
  .el-dialog__body {
    border: 1px solid #b63731;
  }
.coSelect-dialog {
    .coSelect-top {
      .coSelect-title {
        height: 46px;
        line-height: 46px;
        background: #b63731;
        color: #ffffff;
      }
    }
  }
}

</style>
